<template>
  <div>
    <el-cascader
      v-model="state"
      class="width_100"
      :options="arrdessOptions"
      :props="{ value: 'code', label: 'name' }"
      @change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
  /**
   * @import
   */
  import { ArrayFlat } from '~/src/utils/utils'

  /**
   * @prop
   */
  const props = defineProps({
    // tree数据
    options: {
      type: Array,
      default: [],
    } as any,
    // 值
    value: {
      type: Array,
      default: [],
    } as any,
    // 默认值
    defaultValue: {
      type: Array,
      default: [],
    } as any,
  })

  /**
   * @var
   */
  const state: any = toRef<any>([])
  const arrdessOptions = toRef<any>(props.options)
  /**
   * @method
   */

  const emit = defineEmits(['vabAddressChange'])

  //当绑定值变化时触发的事件
  const handleChange = (code: any) => {
    // 例如 code [10001,1002,1003]

    const addressName: any = []

    // 降维
    const array = ArrayFlat(arrdessOptions.value)
    // 通过编码查找对象名称
    for (let index = 0; index < array.length; index++) {
      const element = array[index]
      if (element.code == code[0]) addressName[0] = element.name
      if (element.code == code[1]) addressName[1] = element.name
      if (element.code == code[2]) addressName[2] = element.name
    }

    emit('vabAddressChange', addressName)
  }

  /**
   * @周期
   */
  watch(
    () => props.defaultValue,
    (newValue, oldValue) => {
      state.value = newValue
    },
    { deep: true, immediate: true }
  )

  watch(
    () => props.options,
    (newValue, oldValue) => {
      arrdessOptions.value = newValue
    },
    { deep: true }
  )
</script>

<style scoped></style>
